<!--  -->
<template>
  <div>
    <card :title="title" :count="count">
      <h2 ref="countRef">{{ count }}</h2>
    </card>
  </div>
</template>

<script>
import { defineComponent, nextTick, ref } from 'vue'
import { CountUp } from 'countup.js'
import Card from '../../../../../base-ui/card'
export default defineComponent({
  components: {
    Card
  },
  props: {
    title: {
      type: String,
      require: true
    },
    count: {
      type: Number,
      require: true
    }
  },
  setup(props) {
    const countRef = ref()
    const countUp = new CountUp(countRef.value, props.count)
    const defaultOptions = {
      decimalPlaces: 2, // 保留两位
      duration: 2, // 动画时长
      separator: ',', // 千位分割
      decimal: '.', // 小数分割
      prefix: '￥' // 单位
    }
    nextTick(() => {
      const countUp = new CountUp(countRef.value, props.count, defaultOptions)
      countUp.start()
    })
    countUp.start()
    return { countRef }
  }
})
</script>
<style lang="less" scoped></style>
